<template>
  <aside class="joe_aside" :style="{marginTop: key()?'35px':'0'}">
    <!-- 恋爱计时 -->
    <ul class="joe_header__slideout-count" style="padding: 12px 15px;" v-if="islove">
      <div id="lovexhj" style="width: 100%; height: 100%; text-align: center; font-size: 1rem;">
        <div id="lovexhjImage" style="width: 220px; margin: 0 auto;">
          <!-- 左边的头像 -->
          <img :src="sysConfigInfo.woman_avatar_url" alt="love"
               style="width: 60px; border-radius: 50%;"
          >
          <!-- 中间的图片 -->
          <img src="@/assets/avatar/love.gif" alt="love"
               style="width: 50px; border-radius: 50%;"
          >
          <!-- 右边的头像 -->
          <img :src="sysConfigInfo.man_avatar_url" alt="love"
               style="width: 60px; border-radius: 50%;"
          >
        </div>
        <p id="loveSitetime" style="color: #909399;font-size: 13.5px;margin-bottom: 0">我们相恋了<br>{{ loveTime }}<br></p>
      </div>
    </ul>



    <a v-if="asideAd.imgUrl" class="joe_aside__item advert" target="_blank" rel="noopener noreferrer nofollow"
       :href="asideAd.url"
       :title="asideAd.title">
      <img
        class="lazyloaded"
        width="100%"
        :src="asideAd.imgUrl"
        :data-src="asideAd.imgUrl"
        alt="广告">
      <span class="icon">广告</span>
    </a>

    <section class="joe_aside__item hot" v-if="!islove">
      <div class="joe_aside__item-title">
        <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
          <path
            d="M512 938.667A426.667 426.667 0 0 1 85.333 512a421.12 421.12 0 0 1 131.2-306.133 58.88 58.88 0 0 1 42.667-16.64c33.28 1.066 58.027 28.16 84.267 56.96 7.893 8.533 19.626 21.333 28.373 29.013a542.933 542.933 0 0 0 24.533-61.867c18.134-52.266 35.414-101.76 75.307-121.6 55.04-27.733 111.573 37.974 183.253 121.6 16.214 18.774 38.614 44.8 53.547 59.52 1.707-4.48 3.2-8.96 4.48-12.373 8.533-24.32 18.987-54.613 51.2-61.653a57.813 57.813 0 0 1 55.68 20.053A426.667 426.667 0 0 1 512 938.667zM260.693 282.453A336.64 336.64 0 0 0 170.667 512a341.333 341.333 0 1 0 614.826-203.733 90.24 90.24 0 0 1-42.666 50.56 68.267 68.267 0 0 1-53.547 1.706c-25.6-9.173-51.627-38.4-99.2-93.226a826.667 826.667 0 0 0-87.253-91.734 507.733 507.733 0 0 0-26.24 64c-18.134 52.267-35.414 101.76-75.947 119.254-48.853 21.333-88.32-21.334-120.107-56.96-5.76-4.694-13.226-13.014-19.84-19.414z"
          ></path>
          <path
            d="M512 810.667A298.667 298.667 0 0 1 213.333 512a42.667 42.667 0 0 1 85.334 0A213.333 213.333 0 0 0 512 725.333a42.667 42.667 0 0 1 0 85.334z"
          ></path>
        </svg>
        <span class="text">热门文章</span>
        <span class="line"></span>
      </div>
      <ol class="joe_aside__item-contain">
        <template v-for="(item,index) in limit3Data">
          <li class="item">
            <router-link class="link" :to="'/articleDetails/'+item.id" :title="item.title">
              <i class="sort">{{ index + 1 }}</i>
              <img width="100%" height="130" class="image ls-is-cached lazyloaded"
                   :src="getImgView(item.cover)"
                   data-src="getImgView(item.cover)"
                   :alt="item.title"
              >
              <div class="describe">
                <h6>{{ item.title }}</h6>
                <span>{{ item.viewsNum }} 阅读 - {{ formatTime(item.publishTime) }}</span>
              </div>
            </router-link>
          </li>
        </template>
      </ol>
    </section>
    <section class="joe_aside__item tags flatterer"  v-if="islove">
      <div class="joe_aside__item-title">
        <span class="text">
          <ants-ellipsis :value="poetry.title" :length="15"/>
        </span>
      </div>
      <div class="joe_aside__item-contain">
        <div class="content type6">
          <ants-ellipsis :value="poetry.content" :length="100"/>
        </div>
        <div class="change" @click="loadSentence()">
          <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
            <path
              d="M1000.61 625.5c-24.6-33.4-55.3-155.5-69.3-231.5-3.8-20.6-18.7-36.9-38.8-42.6-4-1.1-8.1-1.8-12.2-1.9-35.3-59-74.5-66.7-100.5-71.8-18.5-3.6-18.8-4.5-21.5-11.1-13.1-32.1-32.3-54-57.1-65.1-20.8-9.4-41.4-9.2-53.7-9.2-.9 0-2-.2-3.2-.5-.8-.2-1.6-.3-2.4-.4-39.3-56.7-70.7-68.1-108.5-68.1h-.2c-38.1 0-63 21-81.2 36.4l-1.6 1.4c-21.3 18-24.9 18.8-33.7 15.2-45.3-18.6-84.6-8.1-116.8 31-13.6 16.6-20.7 29-25.4 37.1l-.1.2c-5.1-.7-10.3-1.6-15.4-2.5-27.5-4.9-51.8 6.7-72.4 34.5-16.7 22.5-27.7 51.7-34.2 73.1-1.7-.2-3.3-.3-5-.3-27.1 0-50.4 20.3-54 47.2-5.5 39.8-15.3 87.4-26.2 127.3-13.4 48.9-27.5 83.2-40.8 99.3-27.6 33.4-28.7 66.5-24.7 88.4 6.7 37.3 34.9 73.7 75.5 97.3 55.3 32.2 158.1 92 447 92 268 0 356.3-52.2 414.8-86.8l2.2-1.3c2.3-1.4 4.5-2.7 6.8-4 18.6-10.8 63-41.6 73.8-93.3 4.4-21.8 4.5-55-21.2-90zM919.01 759c-3 1.8-6.1 3.6-9.3 5.5-27.1 16-60.7 35.9-118.5 51.5-67.9 18.3-155.2 27.2-266.9 27.2-273.4 0-367.5-54.8-418.1-84.2-20.2-11.8-43.4-33.1-47.8-57.7-2.6-14.5 1.6-28.5 12.5-41.6 22.3-27 42.5-78.2 60-152.3 10.3-43.7 16.6-82.8 18.8-97.2 28.9 25.2 104.2 42.6 148.1 51 73.8 14.1 161.6 22.5 234.9 22.5 68.4 0 140.7-7.1 203.7-20.1 62.7-12.9 110.4-30.4 134.6-49.3 1.9-.2 3.7-.6 5.5-1.2 7.7 39.5 39.9 194.9 77.8 246.5 10.6 14.4 14.3 29.2 11.2 44.2-4.3 20.1-21.7 40.8-46.5 55.2zm-271.3-509.5c23.2-.1 41.5-.2 57.3 38.6 14.8 36.3 44.2 42 63.7 45.9 18.9 3.7 38.5 7.6 59.3 40.1-15.5 9-49.3 21.8-101.4 32.7v-1c-1.7-55.7-39.4-82-61.3-88.7-7.3-2.3-15.1-1.5-21.9 2.1-6.8 3.6-11.8 9.6-14.1 17-4.7 15.2 3.9 31.3 19 35.9.8.3 19.9 6.8 20.7 35.5.1 3 .7 6 1.8 9-45.5 6.3-91.7 9.6-137.6 9.6h-.8c-68 0-150.1-7.7-219.4-20.6-60.1-11.2-93.1-22.8-108.5-29.4 11.5-43.5 32-79.4 44.4-77.4 38.1 6.7 55.8 8.2 75.1-25.2 4-6.9 9.5-16.4 20.3-29.6 17.9-21.8 31.6-21.8 50.4-14.1 42.5 17.4 70.8-6.5 91.5-24l3.7-3.1c14-11.8 26.1-22.1 43.3-22.1 18.3 0 32.8 0 65.4 49.3 0 .1.1.2.1.3.2.5.4 1 .7 1.5 13 17.6 32.6 17.7 48.3 17.7z"
            ></path>
            <path
              d="M197.61 503.7c-15.7-2.2-30.3 8.9-32.4 24.6-3.6 25.7-10.5 55.9-18.6 80.8-9.8 30.3-20.5 50.7-30.8 59.1-6 4.8-9.9 11.6-10.8 19.2-.9 7.6 1.2 15.2 6 21.2s11.6 9.9 19.2 10.8c1.2.1 2.3.2 3.5.2 6.4 0 12.6-2.1 17.7-6.2.2-.2.4-.3.6-.5 21.2-17.1 39.2-50.4 53.4-98.8 11-37.4 16-71.6 16.9-78.1 2-15.6-9-30.2-24.7-32.3zm234.9-238.6c-6.6-4-14.3-5.2-21.8-3.4l-.4.1c-55.8 13.8-74.3 65.3-76.5 93.6-.6 7.7 1.9 15.1 6.9 20.9 5 5.8 12 9.4 19.6 9.9h.1c.7.1 1.4.1 2.1.1 14.9 0 27.5-11.5 28.7-26.6 0-.3 3.2-34.7 32.9-42.1 7.5-1.8 13.8-6.4 17.8-13s5.2-14.3 3.4-21.8c-1.6-7.4-6.2-13.7-12.8-17.7zm144.2 34.3c-1.8.4-18 3.3-28.7-18.6-6.9-14.3-24.2-20.2-38.5-13.3-6.9 3.4-12.1 9.2-14.6 16.5-2.5 7.3-2 15.1 1.3 22 22.5 46.2 61.9 51.2 77.8 51.2 5.8 0 11.4-.6 16.2-1.8 7.5-1.8 13.8-6.4 17.8-13s5.2-14.3 3.4-21.8c-1.8-7.5-6.4-13.8-13-17.8s-14.3-5.2-21.7-3.4z"
            ></path>
          </svg>
        </div>
      </div>
    </section>

    <section class="joe_aside__item tags"  style="top: 60px;">
      <div class="joe_aside__item-title">
        <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
          <path
            d="M898.048 556.544L547.84 916.992c-43.008 44.032-112.64 44.032-155.648 0L119.808 636.416c-43.008-44.032-43.008-116.224 0-160.256L470.016 115.2c26.624-28.672 31.744-41.472 59.904-41.472h355.84c28.16 0 50.688 23.552 50.688 52.224v366.592c0 28.672-15.872 40.448-38.4 64zM158.72 596.48l272.384 280.576c21.504 22.016 56.32 22.016 77.824 0l38.4-39.936-349.696-361.472-39.424 40.448c-20.992 22.528-20.992 58.368.512 80.384zm727.04-444.416c0-14.336-11.264-26.112-25.6-26.112H555.008c-13.824 0-33.792 16.384-46.592 29.184l-271.36 280.576 349.696 360.96 272.384-280.576c13.824-14.336 26.624-35.328 26.624-49.664V152.064zM610.304 422.4c-42.496-43.52-42.496-114.688 0-158.208 42.496-44.032 111.104-44.032 153.6 0 42.496 43.52 42.496 114.688 0 158.208s-111.616 43.52-153.6 0zm115.2-118.784c-20.992-22.016-55.808-22.016-76.8 0s-20.992 57.344 0 79.36 55.808 22.016 76.8 0 20.992-57.344 0-79.36z"
          ></path>
        </svg>
        <span class="text">标签云</span>
        <span class="line"></span>
      </div>
      <div class="joe_aside__item-contain">
        <div class="tag">
          <article-lable-sub ref="articleLableSub"/>

        </div>
      </div>
    </section>
  </aside>
</template>

<script>

import {getAction, getFileAccessHttpUrl} from '@/api/manage'
import {differenceDate2, ellipsis, filterObj} from '@/utils/util'
import moment from 'moment'
import ArticleLableSub from '@/views/articleView/subTables/ArticleLableSub'
import router from '@/router'

const jinrishici = require('jinrishici')
import AntsEllipsis from '@/components/ants/AntsEllipsis'

const settings = require('@/settings.js')

export default {
  name: 'AntsContainer',
  components: {
    ArticleLableSub,
    AntsEllipsis
  },
  data() {
    return {
      sysConfigInfo: {},
      url: {
        initArticleSort: '/articleView/initArticleSort',
        initArticleLable: '/articleView/initArticleLable',
        getHotArticle: '/articleView/getHotArticle',
        statisticsTopNum: '/articleView/statisticsTopNum',
        getUserInfoByArticleId: '/articleView/getUserInfoByArticleId',
        getAsideAd: '/extension/asideAd',
      },
      limit3Data: [],
      statisticsTopNumData: {},
      loveTime: '',
      islove: true,
      userInfo: {
        realname: 'Mr.Chen',
        avatar: 'https://www.wxmin.cn:9000/ants-file/temp/mmexport1640361916202_1652970922489.jpg',
        personDescribe: '没有一个冬天不会过去，没有一个春天不会到来。'
      },
      poetry: {},
      asideAd: {},
    }
  },
  watch: {
    $route(to, from) {
      console.log(from.path);//从哪来
      console.log(to.path);//到哪去
      this.reloadAside(to.path)

    }
  },
  created() {
    let sysConfigInfo = JSON.parse(window.localStorage.getItem(settings.ants_sys_config_storage_key))
    if (sysConfigInfo) {
      this.sysConfigInfo = sysConfigInfo
    }

    setInterval(this.differenceDate, 1000)
    this.getHotArticle()
    this.initStatisticsTopNum()
    this.initArticleLable()
    this.loadSentence()
    this.getAsideAd()
  },
  methods: {
    loadSentence() {
      jinrishici.load(result => {

        this.poetry.title = result.data.origin.title + ' - ' + result.data.origin.author
        let content = ''
        result.data.origin.content.forEach(item => {
          content += item
        })
        this.poetry.content = content
      }, err => {
      })
    },
    key() {
      if (this.$route.path.indexOf('/articleDetails/') != -1) {
        // console.log("this.$route.path",this.$route.path)
        return true
      }
      return false
    },
    //格式化时间
    formatTime(value) {
      return moment(value).format('MM/DD')
    },
    differenceDate() {
      this.loveTime = differenceDate2(moment(this.sysConfigInfo.love_date).format('yyyy-MM-DD'))
    },
    getHotArticle() {
      getAction(this.url.getHotArticle, {}).then(res => {
        if (res.success) {
          this.limit3Data = res.result
        }
      })
    },
    initStatisticsTopNum(username) {
      getAction(this.url.statisticsTopNum, {username: username}).then(res => {
        if (res.success) {
          this.statisticsTopNumData = res.result
        }
      })
    },
    // 初始化文章标签
    initArticleLable() {
      getAction(this.url.initArticleLable, {}).then(res => {
        if (res.success) {
          this.lableData = res.result
          this.$refs.articleLableSub.data = res.result
        }
      })
    },
    /* 图片预览 */
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },
    reloadAside(path) {
      if (path.indexOf('/articleDetails/') != -1) {
        this.islove = false
        const id = path.replace('/articleDetails/', '')
        this.getUserInfoByArticleId(id)
      } else {
        this.islove = true
        this.userInfo = {
          realname: 'Mr.Chen',
          avatar: 'https://www.wxmin.cn:9000/ants-file/temp/mmexport1640361916202_1652970922489.jpg',
          personDescribe: '没有一个冬天不会过去，没有一个春天不会到来。'
        }
        this.getHotArticle()
        this.initStatisticsTopNum()
      }
    },
    getUserInfoByArticleId(id) {
      getAction(this.url.getUserInfoByArticleId, {id: id}).then(res => {
        if (res.success) {
          // console.log(res.result)
          this.userInfo = res.result
          this.getHotArticle(this.userInfo.username)
          this.initStatisticsTopNum(this.userInfo.username)
        }
      })
    },
    getAsideAd() {
      getAction(this.url.getAsideAd, {}).then(res => {
        if (res.success) {
          this.asideAd = res.result
        }
      })
    }
  }

}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 210px;
  margin: 0;
}

.top-social {
  position: relative;
  padding: 5px 0;
  width: 250px;
  display: flex;
  flex-wrap: wrap;
  background: var(--background);
  justify-content: space-around;
  margin-bottom: 15px;
  border-radius: var(--radius-wrap);
  box-shadow: var(--box-shadow);
}

.top-social li {
  width: 50px;
  text-align: center;
  position: relative;
  height: 32px;
}

.top-social li a {
  height: 100%;
}
</style>
